<template>
  <view 
  v-if="visible"
    class="modern-alert" 
    :class="[type, { 'alert-active': visible }]" 
    :style="{ top: statusBarHeight + 20 + 'px' }"
  >
    <view class="close-btn" @tap="hide">
      <view class="close-line"></view>
      <view class="close-line"></view>
    </view>

    <view class="alert-header">
      <view class="alert-icon">
        <svg class="alert-svg" viewBox="0 0 24 24">
          <path :d="currentIcon"></path>
        </svg>
      </view>
      <text class="alert-title" :style="{ color: titleColor }">{{ title }}</text>
    </view>

    <text class="alert-content">{{ content }}</text>

    <view class="progress-bar" :style="{ 
      width: progress + '%',
      backgroundColor: typeColor 
    }"></view>
  </view>
</template>

<script>
const icons = {
  success: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',
  error: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
  info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'
};

export default {
  name: 'GlobalAlert',
  data() {
    return {
      visible: false,
      title: '',
      content: '',
      type: 'info',
      typeColor: '#3b82f6',
      titleColor: '#1e40af',
      progress: 0,
      statusBarHeight: 30,
      duration: 3000,
	  animationFrameId: null,
    };
  },
  computed: {
    currentIcon() {
      return icons[this.type] || icons.info;
    }
  },
  mounted() {
    this.initSystemInfo();
  },
  methods: {
	     startCountdown() {
	        // 在开始新动画前取消之前的
	        if (this.animationFrameId) {
	          cancelAnimationFrame(this.animationFrameId);
	          this.animationFrameId = null;
	        }
	  
	        let start = null;
	        const step = (timestamp) => {
	          if (!start) start = timestamp;
	          const progress = timestamp - start;
	          this.progress = (progress / this.duration) * 100;
	  
	          if (progress < this.duration) {
	            // 保存新的动画帧ID
	            this.animationFrameId = requestAnimationFrame(step);
	          } else {
	            this.hide();
	          }
	        };
	  
	        this.animationFrameId = requestAnimationFrame(step);
	      },
	  
	      hide() {
	        // 清除进行中的动画
	        if (this.animationFrameId) {
	          cancelAnimationFrame(this.animationFrameId);
	          this.animationFrameId = null;
	        }
	        this.visible = false;
	        this.progress = 0;
	      },
    async initSystemInfo() {
      try {
        const { statusBarHeight } = await uni.getSystemInfoSync();
        this.statusBarHeight = statusBarHeight;
      } catch (e) {
        console.warn('获取状态栏高度失败', e);
      }
    },

    show(options) {
      const config = {
        type: 'info',
        title: '系统提示',
        content: '',
        duration: 3000,
        ...options
      };

      this.type = config.type;
      this.title = config.title;
      this.content = config.content;
      this.duration = config.duration;

      this.setTypeColor();
      this.startCountdown();
      this.visible = true;
    },

    setTypeColor() {
      const colorMap = {
        success: { main: '#22c55e', text: '#166534' },
        error: { main: '#ef4444', text: '#991b1b' },
        info: { main: '#3b82f6', text: '#1e40af' }
      };

      this.typeColor = colorMap[this.type].main;
      this.titleColor = colorMap[this.type].text;
    },

    // startCountdown() {
    //   let start = null;
    //   const step = (timestamp) => {
    //     if (!start) start = timestamp;
    //     const progress = timestamp - start;
    //     this.progress = (progress / this.duration) * 100;

    //     if (progress < this.duration) {
    //       requestAnimationFrame(step);
    //     } else {
    //       this.hide();
    //     }
    //   };
    //   requestAnimationFrame(step);
    // },

    // hide() {
    //   this.visible = false;
    //   this.progress = 0;
    // }
  }
};
</script>

<style lang="scss" scoped>
.modern-alert {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  opacity: 0;
  transition: 
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 999999999999999 !important;
  background: #ffffff;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);

  &.alert-active {
    opacity: 1;
    transform: translateX(-50%) translateY(10rpx);
  }

  // 各主题样式
  &.success {
    background: #f0fdf4;
    border: 1px solid rgba(34, 197, 94, 0.2);
  }
  &.error {
    background: #fef2f2;
    border: 1px solid rgba(239, 68, 68, 0.2);
  }
  &.info {
    background: #eff6ff;
    border: 1px solid rgba(59, 130, 246, 0.2);
  }

  .close-btn {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .close-line {
      position: absolute;
      width: 80%;
      height: 4rpx;
      background: #666;
      border-radius: 2rpx;

      &:nth-child(1) { transform: rotate(45deg); }
      &:nth-child(2) { transform: rotate(-45deg); }
    }
  }

  .alert-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .alert-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;

      .alert-svg {
        width: 40rpx;
        height: 40rpx;
        color: currentColor;
      }
    }

    .alert-title {
      font-size: 34rpx;
      font-weight: 600;
      line-height: 1.4;
    }
  }

  .alert-content {
    display: block;
    font-size: 28rpx;
    line-height: 1.5;
    color: #666;
    margin-bottom: 24rpx;
  }

  .progress-bar {
    height: 6rpx;
    border-radius: 3rpx;
    transition: width 0.1s linear;
  }
}

// 多平台适配
/* #ifdef H5 */
.modern-alert {
  width: min(90%, 600px);
}
/* #endif */
</style>